<template>
  <div class="child4-page1">
    <Header title="关注列表" go-back="true"></Header>
    <div class="container">
      <!--菜单可切换主题-->
      <!--mode:菜单类型，horizontal水平 vertical垂直 active-name: 默认选中的菜单name-->
     <!--<div class="menu">
       <i-menu mode="horizontal" :theme="theme1" active-name="1">
         <menu-item name="1">
           <Icon type="ios-paper" />
           内容管理
         </menu-item>
         <Submenu name="2">
           <template slot="title">
             <Icon type="ios-stats" />
             统计分析
           </template>
           <MenuGroup title="使用">
             <menu-item name="3-1">新增和启动</menu-item>
             <menu-item name="3-2">活跃分析</menu-item>
             <menu-item name="3-3">时段分析</menu-item>
           </MenuGroup>
           <MenuGroup title="留存">
             <menu-item name="3-4">用户留存</menu-item>
             <menu-item name="3-5">流失用户</menu-item>
           </MenuGroup>
         </Submenu>
       </i-menu>
       <div class="change-skin">
         <p>
           <Icon size="20" type="ios-aperture-outline"></Icon>
           <span>换肤</span>
         </p>
         <RadioGroup v-model="theme1">
           <Radio label="light"></Radio>
           <Radio label="dark"></Radio>
           <Radio label="primary"></Radio>
         </RadioGroup>
       </div>
     </div>-->
      <!--value激活tab面板的name值，默认选中 type:菜单的样式-->
     <div class="tabs">
       <tabs value="name1" type="line">
         <tab-pane label="盆友" icon="logo-freebsd-devil" name="name1">
           <div class="tabs-container">
             <ul>
               <li v-for="(item, index) in follows" :key="index">
                 <div class="list_head">
                   <div class="header_avatar">
                     <img :src="item.avatarUrl" alt="">
                   </div>
                   <div class="header_name">
                     <p>{{item.nickname}}  发布视频</p>
                     <p>12.23</p>
                   </div>
                 </div>
                 <div class="list_content">
                   <div class="content_box">
                     <p>{{item.signature}}</p>
                     <div class="img" :style="{backgroundImage: 'url('+item.avatarUrl+')'}"></div>
                   </div>
                 </div>
               </li>
             </ul>
           </div>
         </tab-pane>
         <tab-pane label="推荐" icon="ios-musical-notes" name="name2">
           <div class="tabs-container">
             推荐
           </div>
         </tab-pane>
         <tab-pane label="电台" icon="logo-tux" name="name3">
           <div class="tabs-container">
             电台
           </div>
         </tab-pane>
       </tabs>
     </div>
    </div>
  </div>
</template>

<script>
import Header from '../../Header/Header'
import {getFollows} from '../../../api/node'

export default {
  name: 'child4Page1',
  data () {
    return {
      theme1: 'light',
      follows: []
    }
  },
  created () {
    getFollows().then(res => {
      // console.log(res)
      if (res.code === 200) {
        this.follows = res.follow
        // console.log(this.follows)
      }
    })
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.child4-page1{
  width: 100%;
  padding-top: 50px;
  .container{
    .menu{
      width: 100%;
      position: relative;
      .change-skin{
        width: 100px;
        background: #fff;
        position: fixed;
        right: 0;
        top: 200px;
        z-index: 2;
        padding: 10px;
        border: 3px solid #f2f2f2;
        border-right: none;
        box-shadow: 10px 10px 8px #888888;
        p{
          font-size: 15px;
          line-height: 25px;
          width: 100%;
          color: #2d8cf0;
        }
        .ivu-radio-wrapper{
          font-size: 15px;
        }
      }
    }
    .tabs{
      width: 100%;
      .tabs-container{
        width: 100%;
        ul{
          li{
            width: 100%;
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 10px;
            .list_head{
              width: 100%;
              padding: 10px;
              display: inline-flex;
              align-items: center;
              .header_avatar{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #f2f2f2;
                img{
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .header_name{
                padding-left: 10px;
                p{
                  font-size: 13px;
                }
              }
            }
            .list_content{
              width: 100%;
              padding: 0 10px 0 70px;
              .content_box{
                width: 100%;
                p{
                  font-size: 13px;
                }
                .img{
                  width: 100%;
                  height: 200px;
                  /*background-position: 100% 100%;*/
                  background-size: 100% 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
